<template>
	<view class="quick-nav">
		<view
			class="nav-item"
			v-for="item in defaultItems"
			:key="item.id"
			@tap="handleNavClick(item)"
		>
			<view class="icon-wrapper" :class="{ 'has-badge': item.badge }">
				<view class="nav-icon" :style="{ backgroundColor: item.iconColor }">
					<image
						:src="`/static/icon/nav/${item.icon}.svg`"
						mode="aspectFit"
						class="icon-image"
					/>
				</view>
				<view v-if="item.badge" class="badge">{{ item.badge }}</view>
			</view>
			<text class="nav-text">{{ item.name }}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { router } from "/@/cool";
import { useUserStore } from "/@/cool/store";
import { computed } from "vue";

interface NavItem {
	id: number;
	name: string;
	icon: string;
	path?: string;
	needLogin?: boolean;
	iconColor?: string;
	badge?: string | number;
}

const props = defineProps<{
	items?: NavItem[];
}>();

const userStore = useUserStore();

// 默认导航项
const defaultItems = computed(() => {
	return (
		props.items || [
			{
				id: 1,
				name: "分类",
				icon: "category",
				path: "/pages/index/category",
				iconColor: "#ff4d4f",
			},
			{
				id: 2,
				name: "订单",
				icon: "order",
				path: "/pages/order/list",
				needLogin: true,
				iconColor: "#1890ff",
			},

			{
				id: 4,
				name: "足迹",
				icon: "footprint",
				path: "/pages/user/footprint",
				needLogin: true,
				iconColor: "#52c41a",
			},
			{
				id: 5,
				name: "近效期",
				icon: "time",
				path: "/pages/goods/near-expiry",
				iconColor: "#ff6b6b",
				badge: "特价",
			},
			{
				id: 6,
				name: "套餐促销",
				icon: "gift",
				path: "/pages/market/promotion-list",
				iconColor: "#eb2f96",
			},
			{
				id: 7,
				name: "秒杀",
				icon: "flash",
				path: "/pages/market/promotion-list",
				iconColor: "#f5222d",
			},

			{
				id: 11,
				name: "个人中心",
				icon: "user",
				path: "/pages/user/profile",
				needLogin: true,
				iconColor: "#1890ff",
			},
		]
	);
});

function handleNavClick(item: NavItem) {
	// 检查是否需要登录
	if (item.needLogin && !userStore.token) {
		uni.showToast({
			title: "请先登录",
			icon: "none",
		});
		router.push("/pages/user/login");
		return;
	}

	// 添加点击反馈
	uni.vibrateShort();

	// 跳转页面
	if (item.path) {
		router.push(item.path);
	}
}
</script>

<style lang="scss" scoped>
.quick-nav {
	display: flex;
	flex-wrap: wrap;
	padding: 20rpx 10rpx;
	background-color: #fff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		padding: 20rpx 0;
		position: relative;

		&:active {
			opacity: 0.7;
		}

		.icon-wrapper {
			position: relative;
			width: 88rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, 0.02);
			border-radius: 24rpx;
			transition: all 0.3s;

			&:active {
				transform: scale(0.95);
			}

			.nav-icon {
				width: 48rpx;
				height: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 12rpx;

				.icon-image {
					width: 32rpx;
					height: 32rpx;
					filter: brightness(0) invert(1);
				}
			}

			.badge {
				position: absolute;
				top: -6rpx;
				right: -6rpx;
				min-width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				padding: 0 6rpx;
				font-size: 20rpx;
				color: #fff;
				background: #ff4d4f;
				border-radius: 16rpx;
				text-align: center;
				transform: scale(0.9);
				transform-origin: center;
				animation: badgePulse 2s infinite;
			}
		}

		.nav-text {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #333;
			font-weight: 500;
		}
	}
}

@keyframes badgePulse {
	0% {
		transform: scale(0.9);
	}
	50% {
		transform: scale(1);
	}
	100% {
		transform: scale(0.9);
	}
}
</style>
